<template>
	<view class="content">
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="50" align="center">序号</uni-th>
					<uni-th width="80">监测站名称</uni-th>
					<uni-th width="110">时间</uni-th>
					<uni-th width="50" align="center">地下水位(m)</uni-th>
					<uni-th width="50" align="center">状态</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.sn }}</uni-td>
					<uni-td>{{ item.name }}</uni-td>
					<uni-td>{{ item.time }}</uni-td>
					<uni-td>{{ item.waterLevel }}</uni-td>
					<uni-td align="center">
						<view :style="{'color': item.status == '1' ? '#28B93D' : '#BA2E26'}">											{{ item.status == '1' ? '正常' : '异常' }}
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="uni-pagination-box">
			<uni-pagination 
				show-icon 
				:page-size="pageSize" 
				:current="pageCurrent" 
				:total="total" 
				@change="change" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					time: '',
					status: ''
				},
				loading: false,
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 100,
				loading: false,
				tableHeight: 300,
				tableKey: 1,
				tableData: [
					{sn: 1, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 2, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 3, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 4, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 5, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 1, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 2, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 3, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 4, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 5, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 1, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 2, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 3, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 4, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 5, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 1, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 2, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 3, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 4, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 5, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 1, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 2, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 3, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 4, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 5, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 1, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 2, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 3, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 4, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 5, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 1, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 2, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 3, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'},
					{sn: 4, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '0'},
					{sn: 5, name: '', time: '2023-07-08 14:51', waterLevel: '', status: '1'}
				],
			}
		},
		onLoad() {
			
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			
			// 分页触发
			change(e) {
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}
	.uni-container {
		height: calc(100% - 65upx);
		overflow-y: auto;
	}
	
	::v-deep {
		.uni-table-th {
			padding: 10upx;
		    font-size: 24upx;
			background: #E6E6E6;
			color: #333;
		}
		.uni-table-td {
			font-size: 24upx;
			padding: 8upx 10upx;
		}
		.uni-table-scroll {
			border: none;
		}
	}
</style>
